<template>
  <k-icon-box
    :name="modelValue ? 'star-on' : 'star'"
    :text-class="modelValue ? 'text-base text-[18rpx]' : 'text-[#9A9A9A] text-[18rpx]'"
    @click="handleCollect"
  ></k-icon-box>
</template>
<script setup lang="ts">
import http from '@/utils/http'
import { showToast } from '@/utils/uni'
const props = defineProps({
  modelValue: {
    type: [Number, Boolean],
    default: 0,
  },
  api: {
    type: [String, Function],
    default: '',
  },
  params: {
    type: Object,
    default: () => ({}),
  },
})
const emit = defineEmits(['update:modelValue'])

function handleCollect() {
  http.post(props.api, props.params).then((res) => {
    emit('update:modelValue', !props.modelValue)
    showToast(res.msg)
  })
}
</script>
<script lang="ts">
export default {
  options: {
    virtualHost: true,
    name: 'KCollectButton',
  },
}
</script>
<style lang="scss" scoped></style>
